<script setup lang="ts">
import {RouterView} from 'vue-router'
import {NMessageProvider} from 'naive-ui'

import MenuTree from "@/views/MenuTree.vue";
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <menu-tree/>
        </el-aside>
        <el-container>
          <el-main>
            <div id="main">
              <n-message-provider>
                <RouterView/>
              </n-message-provider>
            </div>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.common-layout .el-header, .common-layout .el-footer {
  background-color: #324057;
  color: var(--el-bg-color-overlay);
}

.common-layout .el-aside {
  color: var(--el-text-color-primary);
  text-align: center;
  min-height: calc(100vh - 80px);
}


.common-layout .el-main {
  background-color: #E5E9F2;
}

#main {
  background: white;
  padding: 10px;
  height: 100%;
}

li {
  list-style: none;
}
</style>


